﻿<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">AngularJS Tabs Controllers</title>
    <meta name="description" content="AngularJS Tabs example. This example demonstrates a Tabs widget with AngularJS Controllers" /> 
    <link rel="stylesheet" type="text/css" href="../../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>

    <script type="text/javascript" src="../../../scripts/demos.js"></script>
    <script>
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            $scope.tabsSettings = {
                width: 800,
                height: 800
            }
        });
        demoApp.controller("Tab1Controller", function ($scope) {
            $scope.obj1 = {
                name: "Peter Smith",
                calling1: function () {
                    alert("Calling 1");
                }
            };

        });
        demoApp.controller("Tab2Controller", function ($scope) {
            $scope.obj2 = {
                name: "Bill Fuller",
                calling2: function () {
                    alert("Calling 2");
                }
            };
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-tabs jqx-settings="tabsSettings">
		<ul style="margin-left: 30px;">
			<li>Tab 1</li>
			<li>Tab 2</li>
		</ul>
		<div ng-controller="Tab1Controller">
			{{obj1.name}}
			<jqx-button ng-click="obj1.calling1()">Button 1</jqx-button>
		</div>
		<div ng-controller="Tab2Controller">
			{{obj2.name}}
			<jqx-button ng-click="obj2.calling2()">Button 2</jqx-button>
		</div>
		</jqx-tabs>
    </div>
</body>
</html>
